<template>
    <div class="count-down">
        <span class="count-down-end-time">{{endHours}}点场</span>
        <span class="count-down-surplus">{{surplus | filterTime}}</span>
    </div>
</template>

<script>
/**
 * 能力：传递给组件一个活动开始时间，组件根据这个时间去进行计算
 * 1、当前时间未到开始时间时候：展示倒计时
 * 2、当前时间到了开始时间时候：活动进行中
 * 3、当前时间超过了开始时间时：活动已经结束
 */
export default {
  props: {
    // 活动开始时间
    endHours: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data: function () {
    return {
      // 展示活动状态
      surplus: '',
      // 距离活动开始时间秒数
      diffSeconds: 0,
      interval: undefined
    }
  },
  created: function () {
    this.computedSurplus()
  },
  methods: {
    /**
       * 计算展示内容
       */
    computedSurplus: function () {
      if (this.interval) {
        clearInterval(this.interval)
      }
      //   当前时间
      const date = new Date()
      if (date.getHours() > this.endHours) {
        this.surplus = '活动已结束'
        return
      }
      if (date.getHours() === this.endHours) {
        this.surplus = '活动进行中'
        return
      }
      const diffHours = this.endHours - date.getHours() - 1
      const diffMinutes = 60 - date.getMinutes() - 1
      const diffSeconds = 60 - date.getSeconds()
      this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds
      this.interval = setInterval(() => {
        this.diffSeconds -= 1
      }, 1000)
    }
  },
  watch: {
    /**
       * 当diffSeconds值发生变化时就会回调当前方法
       * 根据秒数转化为对应的->时：分：秒
       */
    diffSeconds: function (newV) {
      //   当前秒数 /3600，向下取整，获取到转化的小时数
      const hours = Math.floor(newV / 3600)
      //   当前秒数/60，向下取整，
      // 获取到所有分钟数3600/60=60分钟
      // 对60取模，超过小时数的分钟数
      const minutes = Math.floor(newV / 60)
      //   当前秒数%60，获取到 超过小时数、分钟数的秒数
      const seconds = newV % 60
      // 拼装数据
      this.surplus = hours + ':' + minutes + ':' + seconds

      /**
       * 在当前秒数 变为0，需要修改展示数据
       */
      if (newV === 0) {
        this.computedSurplus()
      }
    },
    /**
     * 监听 活动开始时间的变化
     */
    endHours: function () {
      this.computedSurplus()
    }
  }
}
</script>

<style lang="scss" scoped>

    @import '@css/style.scss';
    .count-down {
        display: inline-block;
        font-size: $infoSize;
        margin-left: $marginSize;

        span {
            display: inline-block;
            padding: px2rem(2) px2rem(4);
        }

        &-end-time {
            background-color: $mainColor;
            border-top-left-radius: px2rem(4);
            border-bottom-left-radius: px2rem(4);
            border: px2rem(1) solid  $mainColor;
            color: white;
        }

        &-surplus {
            background-color: white;
            border-top-left-radius: px2rem(4);
            border-bottom-left-radius: px2rem(4);
            border: px2rem(1) solid  $mainColor;
            color: $mainColor;
        }
    }

</style>
